<template>
	<view class="">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top title="绑定手机号码"></tab-top>
		<!-- #endif -->
		<view class="login-content">
			<view class="box">
				<!-- 账号 -->
				<view class="uni-form-item uni-column form-box">
					<view class="title">
						<image src="/static/login/iphone.png" mode=""></image>
					</view>
					<input class="uni-input" type="number" v-model="phone" placeholder-class="place-holder" placeholder="请输入手机号码" 
					maxlength="15" minlength="11"/>
					<view class="verb" @tap="getVerb" :class="[getCode?'':'c_gray']">{{verbTitle}}</view>
				</view>
				<!-- 输入验证码 -->
				<view class="uni-form-item uni-column form-box form2">
					<view class="title">
						<image src="/static/login/verb.png" mode=""></image>
					</view>
					<input class="uni-input" type="number" v-model="verbText"  placeholder="请输入验证码" />
				</view>
				<!-- 输入密码 -->
				<view class="uni-form-item uni-column form-box form2">
					<view class="title">
						<image src="/static/login/password.png" mode=""></image>
					</view>
					<input v-if="!passVisible" class="uni-input" v-model="passText" type="text" placeholder="请输入密码" />
					<input v-if="passVisible" class="uni-input" v-model="passText" password type="password" placeholder="请输入密码" />

					<view :class="[passVisible?'pass-icon-v':'pass-icon']" @tap="changePassVisible()">
						<image :src="passVisible?'/static/login/visual.png':'/static/login/invisible.png'" mode=""></image>
					</view>
				</view>
				<!-- 登录按钮 -->
				<view class="uni-padding-wrap uni-common-mt">
					<button type="primary" @tap="loginBtn()">确定</button>
				</view>
			

			</view>
		</view>
	</view>
</template>

<script>
	import "@/common/css/login.scss";
	export default {
		data() {
			return {
				phone:'',
				passVisible: true, //密码可见
				passText: '',
				verbText:'',
				getCode:false,
				verbTitle:'获取验证码'
			}
		},
		onLoad() {

		},
		components: {
		},
		computed: {},
		methods: {
			changeLoginType(type) {
				this.loginType = type;
			},
			changePassVisible() {
				this.passVisible = !this.passVisible;
			},
			async loginBtn() {
				
				let res = await this.accountEditPassword();

				if(res.status == 1 ){
					uni.showToast({
						title:'修改成功'
					});
					setTimeout(function(){
						uni.navigateBack({
							delta: 1
						});
					},2000)
					
				}else{
					uni.showToast({
						icon:'none',
						title:'修改失败,请稍后重试'
					});
				}
				
			},
			/**
			 * 获取验证码
			 */
			getVerb() {
				if (this.getCode) {
					return;
				}
				if( !this.regularVerification('phone',this.phone)){
					uni.showToast({
						icon:"none",
						title:"请填写正确的手机号码"
					})
					return;
				}
				this.req({ 
						url: 'api/sendSms',
						method: 'get',
						data: {
							key: 'editPassword',
							
							phone: this.phone
						}
					},
					(res) => {
						if (res.data.status == 1) {
							this.getCode = true;
							let second = 59;
							this.verbTitle = second + 's';
			
							let timer = setInterval(() => {
			
								second--;
								this.verbTitle = second + 's';
			
			
								if (second <= 0) {
									this.getCode = false;
									this.verbTitle = '获取验证码';
									clearInterval(timer);
								}
			
							}, 1000);
			
			
						}
			
					},
					(res) => {
						
					});
			},
			/**
			 * 短信验证修改密码
			 */
			accountEditPassword(){
				return new Promise((res)=>{
					this.req({
						url:'user/account/editPassword',
						data:{
							phone:this.phone,
							password:this.aesEncrypt(this.passText),
							key:'editPassword',
							verificationCode:this.verbText
						}
					},(data)=>{
						res(data.data);
					});
				});
			}
			
			
			
		}
	}
</script>

<style lang="scss">
	.login-content{
		box-sizing: border-box;
		width: 100%;
		padding: 19upx 102upx 0 102upx;
	}
	.c_gray{
		color: #999999;
	}
</style>
